<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input v-model="listQuery.username" placeholder="用户名" style="width: 200px;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            <el-input v-model="listQuery.phone" placeholder="手机号" style="width: 200px;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            <el-select v-model="listQuery.status" placeholder="用户状态" clearable style="width: 130px" class="filter-item">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                搜索
            </el-button>
        </div>

        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column label="用户ID" prop="id" align="center" width="80" />
            <el-table-column label="用户名" prop="username" align="center" />
            <el-table-column label="手机号" prop="phone" align="center" width="120" />
            <el-table-column label="邮箱" prop="email" align="center" width="180" />
            <el-table-column label="注册时间" prop="createTime" align="center" width="180" />
            <el-table-column label="状态" align="center" width="100">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                        {{ scope.row.status === 1 ? '正常' : '禁用' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">
                        编辑
                    </el-button>
                    <el-button :type="scope.row.status === 1 ? 'danger' : 'success'" size="mini"
                        @click="handleStatusChange(scope.row)">
                        {{ scope.row.status === 1 ? '禁用' : '启用' }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />
    </div>
</template>

<script>
import { getUserList, updateUserStatus } from '@/api/user'
import Pagination from '@/components/Pagination'

export default {
    name: 'UserList',
    components: { Pagination },
    data() {
        return {
            list: [],
            total: 0,
            listLoading: false,
            listQuery: {
                page: 1,
                limit: 10,
                username: undefined,
                phone: undefined,
                status: undefined
            },
            statusOptions: [
                { label: '正常', value: 1 },
                { label: '禁用', value: 0 }
            ]
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async getList() {
            this.listLoading = true
            try {
                const { data } = await getUserList(this.listQuery)
                this.list = data.items
                this.total = data.total
            } catch (error) {
                console.error('获取用户列表失败:', error)
            }
            this.listLoading = false
        },
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
        },
        async handleStatusChange(row) {
            try {
                const newStatus = row.status === 1 ? 0 : 1
                const statusText = newStatus === 1 ? '启用' : '禁用'
                await this.$confirm(`确认${statusText}该用户吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                await updateUserStatus({
                    userId: row.id,
                    status: newStatus
                })
                this.$message.success(`${statusText}成功`)
                this.getList()
            } catch (error) {
                if (error !== 'cancel') {
                    console.error('更新用户状态失败:', error)
                    this.$message.error('操作失败')
                }
            }
        },
        handleUpdate(row) {
            // TODO: 实现编辑用户功能
            this.$message.info('编辑用户功能待实现')
        }
    }
}
</script>

<style scoped>
.filter-container {
    padding-bottom: 10px;
}
</style> 